$main-bg:#23282e;
$vice-bg:#32373d;
$three-bg: #474b51;
$nav-item-checked: rgba(0,0,0,.8);
$box-bottom-shadow: 0 1px 10px #0f1921;      
$width:1050px;
$margin-auto: 0 auto;
$margin-all: 14px;
$C1C1C: #1C1C1C;
$black: #000000;
$hover-bg: background-color 0.25s linear, color 0.05s linear,
margin 0.25s linear, opacity 0.25s linear, filter 0.25s linear,
visibility 0.25s linear, transform 0.25s linear;
$img-rotate:transform .25s linear,-webkit-filter .25s linear,-webkit-transform .25s linear;
$iconfont-size: 12.6px;
$blog-list-meta-font-color: white;
$blog-list-meta-font-opacity: 0.8;
$blog-list-meta-font-size: 12.6px;
$transform-360: rotate(360deg);
$transition: transform 0.5s linear;
$bg-white: rgba(85,85,85,.8);
$bg-dark-one: #282c34;
$color-green: #42b983;
$translateY-40:translateY(-40px);
$blue: #0088f5;
$font-color: rgba(255, 255, 255, 0.8);
$hot-pink: #FF69B4;
$list-bg-a:#3f4347;
$list-bg-b:#393d41;
.hot-pink{
  color:#FF69B4;
}
.red{
  color: #e64c3c;
}
.orange{
  color: rgb(255,128,0);
}
.yellow{
  color: yellow;
}
.green{
  color:#42b983!important;
}

.blue{
  color: #0088f5;
}
.purple{
  color:rgb(128,0,255);
}
.white{
  color:white;
}
.bg-green{
  background: #42b983!important;
}
.bg-red{
  background: #e64c3c!important;
}
.bg-blue{
  background: #0088f5!important;
}
.scroll{
  overflow-x: hidden;
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #393d41;
    opacity: 1;
  }
  &::-webkit-scrollbar-track {
    // -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    // background-color: #f5f5f5;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(54, 54, 54, 0.3);
    background-color:black;
    &:hover{
      // background-color: #e64c3c;
      background-color: #0088f5;
    }
  }
}
.click {
  &:active {
    background: black!important;
  }
}

.search-btn {
  width: 80px;
  border: 1px solid rgba(0, 0, 0, 0.65);
  border-left: 0 !important;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 12px;
  background: $main-bg;
  color: white;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  text-align: center;
  line-height: 28px;
  // letter-spacing: 4px;
  &:hover {
    cursor: pointer;
  }
  &:active {
    background: black!important;
  }
}
